@@include('include/head.html')
<style>
h3{
    margin-bottom: 20px;
}
h3+.aiui-row{
    margin-bottom: 10px;
}
.box{
    width: 400px;
}
.top{
    text-align: center;
}
.bottom{
    clear: both;
    text-align: center;
}
.left{
    width: 80px;
    float: left;
}
.right{
    width: 80px;
    float: right;
}
</style>
<div class="baui-tab baui-tab-brief baui-shadow" baui-filter="docDemoTabBrief">
    <div class="baui-tab-wrap">
        <div class="baui-tab-nav-scoll">
            <ul class="baui-tab-header">
                <li class="baui-active">弹出框</li>
            </ul>
        </div>
    </div>
    <div class="baui-tab-content">
        <div class="box">
            <div class="top">
                <button class="aiui-btn" aiui-tooltip  title="Top Start 提示文字" placement="top-start">上左</button>
                <button class="aiui-btn" aiui-tooltip  title="Top Center 提示文字" placement="top">上中</button>
                <button class="aiui-btn" aiui-tooltip  title="Top end 提示文字" placement="top-end">上右</button>
            </div>
            <div class="left">
                <button class="aiui-btn" aiui-tooltip  title="Left Start 提示文字" placement="left-start">左上</button>
                <button class="aiui-btn" aiui-tooltip  title="Left Center 提示文字" placement="left">左中</button>
                <button class="aiui-btn" aiui-tooltip  title="Left end 提示文字" placement="left-end">左下</button>
            </div>
            <div class="right">
                <button class="aiui-btn" aiui-tooltip  title="right Start 提示文字" placement="right-start">右上</button>
                <button class="aiui-btn" aiui-tooltip  title="right Center 提示文字" placement="right">右中</button>
                <button class="aiui-btn" aiui-tooltip  title="right end 提示文字" placement="right-end">右下</button>
            </div>
            <div class="bottom">
                <button class="aiui-btn" aiui-tooltip  title="bottom Start 提示文字" placement="bottom-start">下左</button>
                <button class="aiui-btn" aiui-tooltip  title="bottom Center 提示文字" placement="bottom">下中</button>
                <button class="aiui-btn" aiui-tooltip  title="bottom Center 提示文字" placement="bottom-end">下右</button>
            </div>
        </div>
    </div>
</div>
<script>
aiui.onload(function(){
    var all = document.querySelectorAll('[aiui-tooltip]');
    for (var i = 0; i < all.length; i++) {
        var a = aiui.$tooltip(all[i],{
            content:all[i].getAttribute('title'),
            placement:all[i].getAttribute('placement')
        })
    }
})
</script>
@@include('include/foot.html')